<template>
  <div class="klein-progress">
    <div class="klein-progress-outer">
      <div
        v-if="width > 0"
        class="klein-progress-inner"
        :style="{ width: width + '%' }"
      />
    </div>
    <div class="klein-progress-text">
      {{ width }}
      <span>分</span>
    </div>
  </div>
</template>

<script setup>
defineProps({
  width: {
    type: [String, Number],
    default: 0,
    required: true
  }
})
</script>

<style lang="less" scoped>
.klein-progress {
  display: flex;
  align-items: center;
  overflow: hidden;
  width: 100%;

  &-outer {
    overflow: hidden;
    margin-right: 0.55rem;
    flex: 1;
    height: 0.63rem;
    background-color: #ddd;
    border-radius: 1000px;
  }

  &-inner {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    height: inherit;
    background: linear-gradient(90deg, #50b3ff, #1e56d3);
    border-radius: 1000px;
    transition: width 0.6s ease;
  }

  &-text {
    display: block;
    font-size: 1rem;
    color: #1e56d3;
    font-style: italic;

    span {
      font-size: 0.75rem;
    }
  }
}
</style>
